<template>
  <div class="_mbbox boxgap nbox1">
    <div class="navbox">
      <n-select
        placeholder="显示数据模式"
        v-model:value="val.select_mode"
        :options="ct.select_mode"
      />

      <n-select
        placeholder="筛选属性"
        v-model:value="val.select_ss"
        :options="ct.select_ss"
      />

      <n-select
        placeholder="筛选类型"
        v-model:value="val.select_ycl"
        :options="ct.select_yc"
      />
    </div>

    <!-- 电脑版 -->
    <div class="_bossbox" v-if="cfg.mobile == false">
      <div class="bbox">
        <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 110)">
          <n-gi v-for="(item, key) in cfg.bosslist" @click="ct.ckboss(key)">
            <div class="blist" :class="val.ckname == item.bname ? 'blist_ck' : ''">
              <img style="height: 90%" :src="`${cfg.api}img/${item.icon}@h75.webp`" />
            </div>

            <div class="pbbname">{{ item.bname }}</div>
          </n-gi>
        </n-grid>
      </div>
    </div>
    <!-- 手机版 -->
    <div v-else>
      <n-scrollbar x-scrollable trigger="none">
        <div class="bbox" style="flex-wrap: nowrap">
          <template v-for="(item, key) in cfg.bosslist">
            <div>
              <div @click="ct.ckboss(key)" class="blist">
                <img style="height: 90%" :src="`${cfg.api}img/${item.icon}@h75.webp`" />
              </div>

              <div class="pbbname">{{ item.bname }}</div>
            </div>
          </template>
        </div>
      </n-scrollbar>
    </div>

    <div class="ycl_center" style="margin-bottom: 8px">
      <div class="_yczbox" v-for="(item, key) in ct.ycname">
        <img :src="`${cfg.cdn3}${item}.png`" />
        <div class="_ycz">{{ val?.boss?.[item] }}</div>
      </div>
    </div>
    <div class="bbox" v-if="cfg.mobile == false">
      <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 130)">
        <template v-for="(item, key) in val.hero">
          <template
            v-if="
              (!item.pb || !val.pb) &&
              (!val.select_ss || item.ss == val.select_ss) &&
              (!val.select_ycl || item.yct == val.select_ycl)
            "
          >
            <n-gi>
              <div class="herodiv">
                <div class="zw_2">{{ item.zw }}</div>
                <img class="cava" :src="cfg.function.ava(item.icon)" />
                <div>
                  <div v-if="val.select_mode == 'ycz'">{{ item.yc }}%</div>
                  <div v-if="val.select_mode == 'count'">{{ item.count }}次</div>
                </div>
              </div>
            </n-gi>
          </template>
        </template>
      </n-grid>
    </div>
    <!-- 手机版 -->
    <div class="bbox" v-else>
      <n-grid x-gap="6" y-gap="6" :cols="parseInt(cfg.sswd / 110)">
        <template v-for="(item, key) in val.hero">
          <template
            v-if="
              (!item.pb || !val.pb) &&
              (!val.select_ss || item.ss == val.select_ss) &&
              (!val.select_ycl || item.yct == val.select_ycl)
            "
          >
            <n-gi>
              <div class="herodiv_m">
                <div class="zw_2">{{ item.zw }}</div>
                <img class="bava_m" :src="cfg.function.ava(item.icon)" />
                <div>
                  <div style="font-size: 0.9em">{{ item.yc }}%</div>
                </div>
              </div>
            </n-gi>
          </template>
        </template>
      </n-grid>
    </div>
  </div>
</template>
<style scoped>
.navbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  gap: 8px 8px;
  justify-items: center;
  align-items: center;
}
.zw_2 {
  position: absolute;
  top: 2px;
  background-color: #000;
  border-radius: 999px;
  width: 13px;
  text-align: center;
  font-size: 11px;
  left: 4px;
}
.herodiv {
  display: flex;
  background-color: var(--bg5);
  padding: 8px;
  gap: 8px;
  border-radius: 5px;
  align-items: center;
  height: 100%;
  position: relative;
}
.herodiv_m {
  display: flex;
  background-color: var(--nbox2-bg);
  padding: 8px;
  gap: 8px;
  border-radius: 5px;
  align-items: center;
  height: 60px;
  position: relative;
}
.cava {
  max-width: 40px;
  max-height: 40px;
  border-radius: 5px;
  border: solid 2px #8d8072;
  background-color: #31363d;
}
.bava_m {
  max-width: 37px;
  max-height: 37px;
  border-radius: 5px;
  border: solid 2px #8d8072;
  background-color: #31363d;
}
.bbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.blist_ck {
  background-color: var(--nbox2-bg) !important;
}

.blist {
  display: flex;
  align-items: center;
  height: 80px;
  background-color: var(--bg5);
  padding: 8px;
  overflow: hidden;
  cursor: pointer;
  flex-direction: column;
  border-radius: 8px 8px 0px 0px;
  gap: 10px;
  align-content: center;
  justify-content: center;
  position: relative;
}

.ycl_center {
  display: flex;
  justify-content: center;
  gap: 8px;
}
._ycz {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  left: 0;
  text-shadow: 0 0 3px #000;
}
._yczbox {
  position: relative;
  padding: 4px;
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 12px;
  background-color: var(--nbox2-bg);
  border-radius: 5px;
}
.pbbname {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg5);
  text-shadow: var(--bg3-tx);
  border-radius: 0px 0px 8px 8px;
}

@media (max-width: 428px) {
  .blist {
    width: 17vw;
    font-size: var(--def-16px);
    height: 18vw;
  }
}
</style>
<script>
import { getrole, getbossv2 } from "@/cfg/function.js";
import { cfg } from "@/cfg/cfg.js";

export default defineComponent({
  setup() {
    let val = reactive({
      boss: [],
      pb: true,
      ckname: "",
      stpb: true,
      star_list: {},
      select_mode: "ycz",
    });

    let ct = {
      ycname: ["重伤", "击倒", "击飞"],
      select_mode: [
        {
          label: "异常数值",
          value: "ycz",
        },
        {
          label: "所需次数",
          value: "count",
        },
      ],
      select_yc: [
        {
          label: "不筛选",
          value: null,
        },
        {
          label: "重伤",
          value: "重伤",
        },
        {
          label: "击倒",
          value: "击倒",
        },
        {
          label: "击飞",
          value: "击飞",
        },
      ],
      select_ss: [
        {
          label: "不筛选",
          value: null,
        },
        {
          label: "光",
          value: "光",
        },
        {
          label: "暗",
          value: "暗",
        },
        {
          label: "虚",
          value: "虚",
        },
        {
          label: "水",
          value: "水",
        },
        {
          label: "火",
          value: "火",
        },
        {
          label: "土",
          value: "土",
        },
      ],
      jsc: (ycz) => {
        const it = ycz;
        let ycc = 0;
        let count = 0;
        for (let i = 0; i < 10; i++) {
          count += 1;
          ycc = ycc + it;
          if (ycc >= 100) {
            break;
          }
        }
        return count;
      },
      ckboss(key) {
        const bossdata = cfg.bosslist[key];

        val.ckname = bossdata.bname;
        const hero = cfg.role;
        const newhero = [];
        //遍历
        hero.forEach((item) => {
          if (item.ycl != null) {
            const yc = parseInt(item.yc);
            const ycl = bossdata[item.ycl];
            const star = parseInt(item.star);
            if (star > 2) {
              const yc2 = parseInt(item.yc2);
              const ycl2 = bossdata[item.ycl2];
              if (yc >= 1 && ycl != null) {
                const tag = item.tag1 ?? [];
                newhero.push({
                  name: item.name,
                  icon: item.icon,
                  pb: tag.includes("会战") ? true : false,
                  yc: (yc * ycl).toFixed(1),
                  count: ct.jsc(yc * ycl),
                  zw: 1,
                  ss: item.shu,
                  yct: item.ycl,
                });
              }
              if (yc2 >= 1 && ycl2 != null) {
                const tag = item.tag2 ?? [];
                newhero.push({
                  name: item.name,
                  icon: item.icon,
                  pb: false,
                  yc: (yc2 * ycl2).toFixed(1),
                  count: ct.jsc(yc2 * ycl2),
                  zw: 2,
                  ss: item.shu,
                  yct: item.ycl2,
                });
              }
            }
          }
        });

        //按照mint数值排序
        newhero.sort((a, b) => {
          return b.yc - a.yc;
        });
        val.boss = bossdata;
        val.hero = newhero;
      },
    };

    onMounted(async () => {
      await getrole(true, false, "all");
      await getbossv2();
    });

    return {
      val,
      ct,
      cfg,
    };
  },
});
</script>
